<template>
  <view>
   
    
    <view class="logo" >
      <image mode="widthFix" src="../../static/1.png"></image>
    </view>
    <view class="container">


      <view class="title">郑州校区来访接待登记</view>


      <view class="form">
        <view class="list">
          <view class="info">1 请输入你的真实姓名： <text class="rules">*</text> </view>
          <view class="username">
            <text class="ic_loation1 iconfont  icon-zhongwen"></text>
            <input type="text" v-model="form.username">
          </view>
        </view>
        <view class="list">
          <view class="info">2 请输入你的手机号： <text class="rules">*</text></view>
          <view class="username">
            <text class="ic_loation1 iconfont  icon-shouji"></text>
            <input type="text" v-model="form.tel">
          </view>
        </view>
        <view class="list">
          <view class="info">3 请选择现场接待你的老师： <text class="rules">*</text></view>
          <view class="select">
            <radio-group @change="handler">
              <view class="select_teacher">
                <label>
                  <radio value="1" :checked="form.teacher == 1" style="transform:scale(0.7)" />
                  王心盈老师</label>
              </view>
              <view class="select_teacher">
                <label>
                  <radio value="2" :checked="form.teacher == 2" style="transform:scale(0.7)" />
                  周艳艳老师
                </label>
              </view>

            </radio-group>
          </view>
        </view>

        <view class="list">
          <view class="info">4 请获取你现在的位置： <text class="rules">*</text></view>
          <view @click="getLocation" class="location">

            <view v-if="!form.address">

              <text class="ic_loation iconfont  icon-dizhi"></text>
              获取地理位置
            </view>
            <view v-else class="address_box">
              <view> 当前位置：</view>
              <view class="addres_ellips"> {{form.address}}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="submit" @click="submit">提交</view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          // 
          username: '',
          tel: '',
          teacher: '',
          address: '',
          longitude: '',
          latitude: '',
        },
        
      }
    },
    onLoad() {
    },
    methods: {
      getLocation() {
        console.log('getLocation')
        uni.chooseLocation({
          success: (res) => {
              console.log(res)
            if (res.errMsg != 'chooseLocation:ok') {
              return uni.showToast({
                title: '获取位置失败请稍后重试',
                icon: 'none',
                duration: 1000
              });
            }
            this.form.address = res.address + res.name
            this.form.longitude = res.longitude
            this.form.latitude = res.latitude
          }
        });
      },
      handler(e) {
        // 保存选中的老师
        this.form.teacher = e.detail.value
      },
      submit() {
        //  校验
        if (!this.form.username) {
          return uni.showToast({
            title: '请填写姓名',
            icon: 'none',
            duration: 1000
          });
        }
        if (!this.form.tel) {
          return uni.showToast({
            title: '请填写手机号',
            icon: 'none',
            duration: 1000
          });
        }

        var phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;

        if (!phoneReg.test(this.form.tel)) {
          return uni.showToast({
            title: '手机号格式不正确',
            icon: 'none',
            duration: 1000
          });
        }
        if (!this.form.teacher) {
          return uni.showToast({
            title: '请选择接待老师',
            icon: 'none',
            duration: 1000
          });
        }
        if (!this.form.address) {
          return uni.showToast({
            title: '请选择现在位置',
            icon: 'none',
            duration: 1000
          });
        }
        this.showLoading('加载中...')


  
        uni.request({
          url: 'http://127.0.0.1:3007/addusers',
          // 发送JSON数据格式
          data: this.form,
          method: "post",
          success: (res) => {

            if (res.data.status != 0) {
              return uni.showToast({
                title: '提交失败，请稍后重试',
                duration: 2000,
                icon: 'none',
                type: 'warn'
              });
            }

            uni.showToast({
              title: '提交成功',
              duration: 2000
            });
            // 清空
            for (var k in this.form) {
              this.form[k] = ""
            }

          },
          fail: (res) => {
            this.hideLoading()
             uni.showToast({
               title: '提交失败，请稍后重试',
               duration: 2000,
               icon: 'none',
               type: 'warn'
             });
            
            
          },
          finaly: () => {
           
          }

        })
      },
      hideLoading() {
        if (uni.hideLoading) {
          // 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理
          uni.hideLoading();
        } else {
          uni.hideToast();
        }
      },
      showLoading(message) {
        if (uni.showLoading) {
          // 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理
          uni.showLoading({
            title: message,
            mask: true
          });
        } else {
          // 低版本采用Toast兼容处理并将时间设为20秒以免自动消失
          uni.showToast({
            title: message,
            icon: 'loading',
            mask: true,
            duration: 20000
          });
        }
      },


    },


  }
</script>

<style  >
  .demo{
         position: fixed;
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         background: #fff;
         font-size: 26rpx;
        
     }
     
       .demo  .left{
             float: left;
             position: absolute;
             width: max-content;
             height: max-content;
             top: 0;
             bottom: 0;
             left: 20rpx;
             margin: auto;
         
         }

  .logo image {

    width: 100%;

  }


  .container {
    padding: 0 36rpx 80rpx;
    background-color: #fff;
  }

  .title {
    font-size: 48rpx;
    line-height: 160rpx;
    color: #464646;
    font-weight: 600;
    text-align: center;

  }

  .info {
    font-size: 36rpx;

    line-height: 50rpx;
    margin-bottom: 25rpx;
    margin-top: 30rpx;
  }

  .list input {
    border: 1px solid #dfe6ee;
    border-radius: 5px;
    color: #a0a0a0;
    height: 84rpx;
    /* background-color: #fdfcfa; */
    padding-left: 20px;
  }

  .rules {
    color: red;
  }

  .submit {

    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    font-size: 36rpx;
    color: #fff;
    background-color: #4FB6FB;
    margin: auto;
  }

  .select_teacher {
    border: 1px solid #dfe6ee;
    padding: 0 20rpx;
    height: 84rpx;
    line-height: 84rpx;
    margin-bottom: 8px;
    color: #818181;
    font-size: 32rpx;
    /* background-color: #fdfcfa; */
    border-radius: 5rpx;
  }

  .select_teacher label {
    display: block;
    height: 100%;
  }

  .location {
    font-size: 36rpx;
    height: 244rpx;
    text-align: center;
    line-height: 244rpx;
    border: 1px solid #dde5ed;
    border-radius: 5px;
    color: #2570fe;
    margin-bottom: 86rpx;
    overflow: hidden;
  }

  .ic_loation {
    padding-right: 4px;
    font-size: 36rpx;
  }

  .username {
    position: relative;

  }

  .username input {
    padding-left: 90rpx;
  }

  .ic_loation1 {
    position: absolute;
    left: 36rpx;
    top: 25rpx;
    font-size: 36rpx;

  }

  .address_box {
    color: #838383;
    line-height: 110rpx;
    text-align: left;
    padding-left: 36rpx;
  }

  .addres_ellips {
    line-height: 65rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
</style>
